import React, { useEffect, useState } from 'react';
import { Badge, Button, Card, Descriptions } from 'antd';
import {getHosListDetailRequest} from '@/api/hospital/hospitalList'
import {  useParams,useLocation,Location } from 'react-router-dom';

import type {BookingRuleType,
   hospitalDetailReturnType,
   hospitalListItemsType} from '@/api/hospital/model/hospitalListType'

   //为了让useLocation可以使用state,我们需要封装一个自定义hook
   //自定义hook可以额接收一个泛型,这个泛型就是state属性值的类型 传过去T就是那个hello string
   function useMyLocation<T>(){
       type L = Location & {state : T};
       return useLocation() as L;
   }
 export default function HospitalShow() {
  //使用自定义hook(useMyLocation) 路由传参id 
  const location =useMyLocation<{hello:string}>();
  // console.log(location,'location');行不通
   const {hello} = location.state
   
    //  params path传参传参 拿到id
    const {id} = useParams();
    
    //书写一个保存详细信息的状态
    const [detail,setDetail] = useState<hospitalDetailReturnType>({});
    
  //刚加载组件就发送详情请求
  useEffect (()=>{
    const getHosDetail = async () => {
      const result = await getHosListDetailRequest(id as string);
      console.log(result);
      //把数据设置给state
       setDetail(result);
      //console.log(detail);
      //setDetail(result);
      //此时这个detail是个空  打印是同步的 是异步直接打印不行  远说没必要
      //console.log(detail);
    };
    getHosDetail()
  },[]) ;
  return (
    <div>  
      <Card>
      {/* column={2} 一行展示两个   span={2}占据两格*/}
    <Descriptions title="基本信息" bordered column={2}>
    <Descriptions.Item label="医院名称">{(detail.hospital as hospitalListItemsType)?.hosname}</Descriptions.Item>
    <Descriptions.Item label="医院logo">
      {/* 用三元如果有就显示没有就返回个空 */}
          {(detail.hospital as hospitalListItemsType)?.logoData ? (
            <img
              width={100}
              src={`data:image/jpeg;base64,${
                (detail.hospital as hospitalListItemsType)?.logoData
              }`}
              alt=""
            />
          ) : (
            ""
          )}
        </Descriptions.Item>
    <Descriptions.Item label="医院编码">{(detail.hospital as hospitalListItemsType)?.hoscode}</Descriptions.Item>
    <Descriptions.Item label="医院地址">{(detail.hospital as hospitalListItemsType)?.param.fullAddress}</Descriptions.Item>
    <Descriptions.Item label="医院坐车地址" span={2}>{(detail.hospital as hospitalListItemsType)?.route}</Descriptions.Item>
    <Descriptions.Item label="医院简介" span={2}>{(detail.hospital as hospitalListItemsType)?.intro}</Descriptions.Item>
  </Descriptions>
  <Descriptions title="预约规则信息" bordered column={2} style={{marginTop:'50px'}}>
  <Descriptions.Item label="预约周期">
          {(detail.bookingRule as BookingRuleType)?.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {(detail.bookingRule as BookingRuleType)?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {" "}
          {(detail.bookingRule as BookingRuleType)?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {" "}
          {(detail.bookingRule as BookingRuleType)?.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}> 
        {/* 因为是数组两条规则 需要遍历  item每一项 */}
          {(detail.bookingRule as BookingRuleType)?.rule.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </Descriptions.Item>
  </Descriptions>
  <Button style={{marginTop:'30px'}}>返回</Button>
  </Card>
  </div>
  )
}
